<!DOCTYPE html>
<html lang="en">

<head>
    <!-- auto refresh -->
    <meta http-equiv="refresh" content="999">

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>ARP Topo</title>
    <style>
        .node {
            stroke: #fff;
            stroke-width: 2px;
        }

        .link {
            stroke: #999;
            stroke-opacity: .6;
        }
    </style>
</head>
<body>

    <h1>ARP TOPO</h1>
    <h2>last modified at: {{ last_modified }}</h2>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script>
        
        var graph = {% autoescape false %}{{ graph }}{% endautoescape %};
        

        var width = window.innerWidth - 60,
            height = window.innerHeight - 120,
            nodeWidth = 78,
            nodeHeight = 18;

        var color = d3.scale.category20();

        var force = d3.layout.force()
            .charge(-9800)
            .chargeDistance(250)
            .linkDistance(250)
            .gravity(0.4)
            .friction(0.9)
            .alpha(0.1)
            .theta(0.8)
            .linkStrength(0.5)
            .size([width, height]);

        var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

        force
            .nodes(graph.nodes)
            .links(graph.links)
            .start();

        var link = svg.selectAll(".link")
            .data(graph.links)
            .enter().append("line")
            .attr("class", "link")
            .style("stroke-width", function (d) {
                return Math.sqrt(d.value);
            });

        var node = svg.selectAll(".node")
            .data(graph.nodes)
            .enter()
            .append("g")
            .attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            })
            .call(force.drag);

        node.append("rect")
            .attr("class", "node")
            .attr("width", nodeWidth)
            .attr("height", nodeHeight)
            .attr("rx", 5)
            .attr("ry", 5)
            .style("fill", function (d) {
                return color(d.group);
            })
            .style("stroke", "white")
            .style("stroke-width", "1px")
            .style("fill", "rgb(242,107,48)")
            ;

        node.append("text")
            .attr("x", 5)
            .attr("y", 2)
            .text(function (d) {
                return d.name;
            })
            .style("font-size", "12px")
            .style("stroke", "white")
            .style("text-anchor", "start")
            .attr("dy", "1em")
            ;

        node.append("title")
            .text(function (d) {
                return d.name;
            });

        force.on("tick", function () {
            link.attr("x1", function (d) {
                return d.source.x + (nodeWidth / 2);
            })
                .attr("y1", function (d) {
                    return d.source.y + (nodeHeight / 2);
                })
                .attr("x2", function (d) {
                    return d.target.x + (nodeWidth / 2);
                })
                .attr("y2", function (d) {
                    return d.target.y + (nodeHeight / 2);
                });

            node.attr("transform", function (d) {
                return "translate(" + d.x + "," + d.y + ")";
            });
        });
    </script>
</body>

</html>